import React, { PureComponent } from 'react'
import {
  Text,
  TouchableOpacity
} from 'react-native'
import PropTypes from 'prop-types'
import StyleSheet from '../../utils/rzStyleSheet'

// import BaseComponent from '../../components/common/baseComponent'

const styles = StyleSheet.create({
  button: {
    height: 44,
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 10,
    justifyContent: 'center',
    borderRadius: 10,
    backgroundColor: '#d7bd5b'
  },
  title: {
    // flex: 1,
    fontSize: 18,
    textAlign: 'center',
    backgroundColor: 'transparent'
  }
})

class PureButton extends PureComponent {
  constructor (props) {
    super(props)
    this.displayName = 'PureButton'
  }

  componentWillUpdate () {
    console.log('===PureButton===')
  }

  // normalRender () {
  //   const {
  //     style,
  //     titleStyle,
  //     allowFontScaling,
  //     buttonTitle
  //   } = this.props
  //   return (
  //     <View style={[styles.button, style]}>
  //       <Text
  //         style={[styles.title, titleStyle]}
  //         allowFontScaling={allowFontScaling}
  //       >
  //         {buttonTitle}
  //       </Text>
  //     </View>
  //   )
  // }

  render () {
    return (
      <TouchableOpacity style={styles.button} disabled>
        <Text
          style={styles.title}
        >
          {this.props.buttonTitle}
        </Text>
      </TouchableOpacity>
    )
  }
}

PureButton.propTypes = {
  buttonTitle: PropTypes.string
}

PureButton.defaultProps = {
  buttonTitle: 'PureButton'
}

export default PureButton
